<template>
  <div class="_components_user-message-reply_video">
    <div>
      <img v-if="info.name !== ''" class="voice-img" src="../../../../assets/home/video.png" alt="">
      <p v-if="info.name !== ''">{{ info.name }}</p>
      <el-button size="small" type="success" @click="openDialog">素材库选择</el-button>
    </div>
    <el-dialog v-if="dialog" title="视频" :close-on-click-modal="false" :visible.sync="dialog" append-to-body>
      <el-form label-position="right" label-width="3rem" class="mb15">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="名称">
              <el-input v-model="params.name" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <!-- <UploadBtn @setUrl="addUrl" class="mr" /> -->
            <el-button type="primary" size="small" class="ml10" @click="getList">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <vxe-table
        ref="list"
        border
        resizable
        highlight-hover-row
        :data="list"
        :auto-resize="true"
        height="350"
        highlight-current-row
        text-algin="center"
      >
        <vxe-table-column type="radio" width="35" />
        <vxe-table-column field="id" title="media_id" />
        <vxe-table-column field="name" title="名称" />
        <vxe-table-column field="createTime" title="更新时间" width="150" />
      </vxe-table>
      <vxe-pager
        :current-page.sync="params.pageNum"
        :page-size.sync="params.pageSize"
        :total="total"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="getList()"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import UploadBtn from '@/components/upload/uploadBtn'
import { addMediaSource, listMediaSource } from '@/api/wxMp'

export default {
  // components: {
  //   UploadBtn
  // },
  props: {
    setinfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      info: {
        name: ''
      },
      dialog: false,
      params: {
        mediaId: '',
        appId: '',
        name: '',
        pageNum: 1,
        pageSize: 20,
        type: 'video'
      },
      addParams: {
        type: 'video',
        appId: '',
        url: '',
        subject: '',
        content: ''
      },
      total: 0
    }
  },
  created() {
    this.params.appId = this.setinfo.appId
    this.params.mediaId = this.setinfo.mediaId
    this.addParams.appId = this.setinfo.appId
    if (this.setinfo.type === 'video') {
      this.info = this.setinfo
    }
  },
  methods: {
    addUrl(url) {
      this.addParams.url = url
      addMediaSource(this.addParams).then(res => {
        this.getList()
      })
    },
    clickSure() {
      if (this.$refs.list.getRadioRecord() !== null) {
        this.dialog = false
        this.info = this.$refs.list.getRadioRecord()
        this.$emit('getInfo', this.$refs.list.getRadioRecord())
      }
    },
    getList() {
      listMediaSource(this.params).then(res => {
        this.total = res.total
        this.list = res.records
        this.list.forEach((it, idx) => {
          if (res === it.id) {
            this.$refs.list.setRadioRow(this.list[idx], true)
          }
        })
        this.dialog = true
      })
    },
    openDialog() {
      this.getList()
    }
  }
}
</script>

<style lang="scss">
._components_user-message-reply_video {
  width: 100%;
  display: flex;
  justify-content: space-between;
  >div {
    width: 100%;
    border: 1px solid #eee;
    padding: 50px 0;
    text-align: center;
    .voice-img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>
